<!doctype html>

<html style="height:100%">
<head>
    <title>日记助手</title>

    <link rel="stylesheet" href="{{ url_for('static', filename='jquery-ui.css') }}" />
    <script src="{{ url_for('static', filename='jquery-3.3.1.js') }}"></script>
    <script src="{{ url_for('static', filename='jquery-ui.js') }}"></script>

    <style type="text/css">
    body,input,textarea {font-family:Microsoft YaHei; font-size:100%; border-radius:5px;}
    textarea {width:98%; height:100%; resize:none;}
    table {table-layout:fixed; }

    li.type1 {margin:0.2%; float:left; width:32.9%; text-align:center; background-color:#CC0033; color:white; }
    li.type2 {margin:0.2%; float:left; width:32.9%; text-align:center; background-color:#003399; color:white; }
    li.type3 {margin:0.2%; float:left; width:32.9%; text-align:center; background-color:#000000; color:white; }
    li.type4 {margin:0.2%; float:left; width:32.9%; text-align:center; }

    ol { list-style-type:none; }
    </style>
</head>

<body style="margin:0; width:100%; text-align:center;">

    <!-- 标题 -->
    <div id=top align=center style="width:100%; height:50px; background:#003399; ">
        <table border=0 style="width:90%; height:100%; ">
            <tr align=left>
                <th width=30%>
                    <a href="" style="text-decoration:none; color:white; font-size:150%; ">日记助手</a>
                    <a href="#ret_str" style="margin-left:20px; text-decoration:none; color:white; ">生成结果</a>
                </th>
            </tr>
        </table>
    </div>

    <!-- 正文 -->
    <div style="width:90%; margin:0 auto; ">
        <div style="margin:10px; font-size:120%; ">
            行程：<input id=route size=80 style="text-align:center" value="早饭——上班——午饭——上班——晚饭——上班——回家——">
        </div>

        <ol id="selectable" style="margin:0px; padding:0px;">
            <!-- 固定 -->
            <li class="type4">
                【日期|天气|地点】<textarea id=content1 rows=10 title=''></textarea>
            </li>
            <li class="type4">
                【健康|饮食】<textarea id=content2 rows=10 title='睡眠、健身、洗澡；眼睛；美食'></textarea>
            </li>
            <li class="type4">
                【收入|支出】<textarea id=content3 rows=10 title='收入；支出'></textarea>
            </li>

            <!-- 努力 -->
            <li class="type1">
                【工作成就感】<textarea id=content11 rows=10 title=''></textarea>
            </li>
            <li class="type1">
                【家人|家务】<textarea id=content12 rows=10></textarea>
            </li>
            <li class="type1">
                【人际关系】<textarea id=content13 rows=10 title='偶遇；聊天；合作'></textarea>
            </li>
            <li class="type1">
                【兴趣爱好|零星时间】<textarea id=content14 rows=10 title='听书、音乐、新闻、看书'></textarea>
            </li>

            <!-- 思考 -->
            <li class="type3">
                【异想天开】<textarea id=content21 rows=10></textarea>
            </li>
            <li class="type3">
                【回忆往事】<textarea id=content22 rows=10></textarea>
            </li>

            <!-- 总结 -->
            <li class="type2">
                【难过|遗憾】<textarea id=content31 rows=10 title=''></textarea>
            </li>
            <li class="type2">
                【备忘录】<textarea id=content32 rows=10 title='备忘'></textarea>
            </li>
            <li class="type2">
                【长短期目标】<textarea id=content33 rows=10 title='备忘'></textarea>
            </li>
            <li class="type2">
                【反省】<textarea id=content34 rows=10></textarea>
            </li>
        </ol>

        <p style="clear:both">
            <input type=submit value=生成 onclick="doProcess()"/>
            <input type=submit value=拷贝 onclick="doCopy()"/>
        </p>

        <textarea id=ret_str rows=20 style="background-color:#EBEBE4"></textarea>
    </div>

    <!-- 底部 -->
    <div id=bottom style="width:100%; height:50px; background:#003399; ">
        <table style="width:90%; height:100%; margin:0 auto">
            <tr>
                <td style="text-align:right">
                    <a href=#top style="text-decoration:none; color:white; font-size:150%; ">回到顶部↑</a>
                </td>
            </tr>
        </table>
    </div>

    <script type="text/javascript">
    <!-- 提示框 -->
    $( document ).tooltip();

    <!-- 按钮 -->
    $( "input[type=submit], button" )
    .button()
    <!-- .click(function( event ) { -->
    <!-- event.preventDefault(); -->
    <!-- }); -->

    <!-- 屏蔽键盘F5   -->
    document.onkeydown = function() {
        var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
        if (keyCode == 116) {
            window.event.keyCode = 0;
            event.cancelBubble = true;
            return false;
        }
    }

    <!-- 大小可调整 -->
    <!-- $("li").resizable();

    <!-- 乱序 -->
    window.onload = function ()
    {
        var ol = $("#selectable")
        var lis = $("#selectable").children()
        var size = lis.length
        lis.each(function(){
            $(this).insertBefore(lis.eq(parseInt(Math.random()*size)));
        });
    }

    //获取十六进制颜色
    function randomColor1(){
        var r = Math.floor(Math.random()*256);
        var g = Math.floor(Math.random()*256);
        var b = Math.floor(Math.random()*256);

        if(r < 16){
            r = "0"+r.toString(16);
        }else{
            r = r.toString(16);
        }
        if(g < 16){
            g = "0"+g.toString(16);
        }else{
            g = g.toString(16);
        }
        if(b < 16){
            b = "0"+b.toString(16);
        }else{
            b = b.toString(16);
        }

        return "#"+r+g+b;
    }

    <!-- $("h3").css("color",randomColor1()); -->

    <!-- 校验为空 -->
    function check_null(value, alerttxt)
    {
        if (value != "")
        {
            return true;
        }
        else
        {
            alert(alerttxt);
            return false;
        }
    }

    <!-- 生成 -->
    function doProcess()
    {
        var json_data = {}
        $("textarea").each(function(){
            json_data[$(this).attr("id")] = {"title":$.trim($(this).parent().text()), "content":$(this).val()};
        });
        delete json_data["ret_str"];
        json_data["route"] = {title:$.trim($("#route").parent().text()), content:$("#route").val()};
        <!-- alert(JSON.stringify(json_data)); -->

        $.post('/do_process', JSON.stringify(json_data),
        function (data, status) {
            if (status == 'success')
            {
                ret_json = $.parseJSON(data);

                $('#ret_str').val(ret_json.ret_str)
            }
            else
            {
                $('#ret_str').val(status)
            }
        })
    }

    <!-- 拷贝 -->
    function doCopy()
    {
        var widget = $("#ret_str")
        widget.focus();
        widget.select();
        document.execCommand("Copy");
        alert("已拷贝到剪切板");
    }
    </script>
</body>
</html>